<script setup>
import { Delete, Edit, Search, Refresh, Lock } from "@element-plus/icons-vue";
import { ref } from "vue";
import { dataUserWeekCountService } from "@/api";
import { useUserStore } from "@/stores";
import changeTime from "./components/NewUserTrends copy.vue";
import { useRouter } from "vue-router";
const router = useRouter();

// 导入视图
import DataContainer from "./components/DataContainer.vue";
import NewUserTrends from "./components/NewUserTrends.vue";
import NewUserTrendsCopy from "./components/NewUserTrends copy.vue";
import CardContainer from "./components/CardContainer.vue";
import CardUserProfile from "./components/CardUserProfile.vue";
import CardMessage from "./components/CardMessage.vue";

const userInfo = useUserStore();

let time = ref("week");
let titleTime = ref("本周新增用户趋势");
const changeTimeStatus = (value, remark) => {
  time.value = value;
  titleTime.value = remark + "新增用户趋势";
};
</script>
<template>
  <el-row :gutter="20">
    <el-col :span="18">
      <el-row :gutter="20">
        <CardContainer></CardContainer>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <DataContainer title="新增评论趋势">
            <NewUserTrends></NewUserTrends>
          </DataContainer>
        </el-col>
        <el-col :span="12">
          <DataContainer title="新增点赞趋势">
            <NewUserTrends></NewUserTrends>
          </DataContainer>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <DataContainer :title="titleTime">
            <template #extra>
              <el-button
                plain
                :type="item.type"
                v-for="item in changeTime"
                @click="changeTimeStatus(item.time, item.remark)"
                >{{ item.remark }}</el-button
              >
            </template>
            <NewUserTrendsCopy :time="time"></NewUserTrendsCopy>
          </DataContainer>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-row>
        <el-col :span="24">
          <DataContainer title="个人资料">
            <template #extra>
              <el-link type="primary" @click="router.push('/user/profile')"
                >详情</el-link
              >
            </template>
            <CardUserProfile></CardUserProfile>
          </DataContainer>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <DataContainer title="我的消息">
            <template #extra>
              <el-link
                type="primary"
                @click="router.push('/notice/noticeManager')"
                >详情</el-link
              >
            </template>
            <CardMessage></CardMessage>
          </DataContainer>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <!-- <el-row :gutter="20">
    <el-col :span="24">
      <DataContainer title="今日新增用户">
        <NewUserTrends></NewUserTrends>
      </DataContainer>
    </el-col>
  </el-row> -->
</template>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}

.cardCount {
  width: 100%;
  height: 120px;
  background: #d2b5b5;
}
</style>
